<template>
	<MyDialog v-model="show" width="600" title="签到记录" :slot-show="false">
		<el-table :data="studentList">
			<el-table-column type="index"></el-table-column>
			<el-table-column prop="title" label="签到名称" width="200"></el-table-column>
			<el-table-column prop="name" label="签到时间">

			</el-table-column>
			<el-table-column label="类型">
				<template #default="scope">
					<el-tag type="danger" v-if="scope.row.status == '0'">未到</el-tag>
					<el-tag type="success" v-if="scope.row.status == '1'">请假</el-tag>
					<el-tag type="info"  v-if="scope.row.status == '2'">已到</el-tag>
					<el-tag type="danger" v-if="scope.row.status == '3'">旷课</el-tag>
					<el-tag type="warning" v-if="scope.row.status == '4'">迟到</el-tag>
					<el-tag type="warning" v-if="scope.row.status == '-1'">{{scope.row.address}}</el-tag>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination v-model:current-page="pageData.current" v-model:page-size="pageData.size" :total="pageData.total"
			:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
	</MyDialog>
</template>

<script>
	var that;
	import myMixin from '@/utils/myMixin.js'
	import MyDialog from '@/components/MyDialog.vue'

	import {
		useMouse
	} from '@/utils/index.js'
	export default {
		mixins: [myMixin], //混入
		components: {
			MyDialog,
		},
		data() {
			return {
				show: true,
				studentList: [],
				studentId: '', //兼容老师查看学生记录
			}
		},
		mounted() {
			that = this;

		},
		setup() {
			return useMouse();
		},
		watch: {
			show(news) {
				this.$emit("close")
			},
			studentId(news) {
				if (news) {
					this.getData()
				}

			}
		},
		methods: {
			//当前页数据显示条数变化
			handleSizeChange(size) {
				this.pageData.size = size;
				this.getData();
			},
			//当前页数变化
			handleCurrentChange(current) {
				this.pageData.current = current;
				this.getData();
			},
			async getData() {
				const data = await that.$asyncHttpConfig({
					url: that.$store.state.url + '/qiandao/allRecord',
					data: {
						id: '',
						studentId: that.studentId,
						types: that.$store.state.$tabbar.status,
						type: "0",
						...that.pageData
					},
				})

				that.studentList = data.data;
				//分页
				that.pageData.total = data.total;

			}
		},
	}
</script>

<style>
</style>